<template>
  <div class="input-box">
    <div :class="icon != null ? 'iconfont icon-' + icon : ''"></div>
    <div class="contents-box">
      <input
        :value="searchContents"
        @keydown.enter="submitSearch()"
        :placeholder="placeHolder"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
let searchContents = ref("");
const props = withDefaults(
  defineProps<{
    icon: string;
    placeHolder: string;
  }>(),
  {
    icon: "icon-search",
    placeHolder: "请输入搜索关键字",
  }
);
function submitSearch() {
  console.log("输出用户搜索内容：", searchContents.value);
}
</script>

<style>
.input-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  height: 32px;
  border-radius: 20px;
  padding-right: 10px;
  width: 158px;
}
.input-box .iconfont {
  padding-left: 8px;
  padding-right: 5px;
}
.contents-box {
  overflow: hidden;
}
.contents-box input {
  border: none;
  outline: none;
  font-size: 12px;
}
</style>
